<template>
  <div id="khls-list">
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      highlight-current-row
      height="70vh"
    >
      <el-table-column
        :resizable="false"
        prop="customer.customerName"
        label="客户名称"
        width="200"
        fixed
      >
      </el-table-column>
      <el-table-column :resizable="false" prop="customerLossId" v-if="false">
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="accountManager.name"
        label="客户经理"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="lastOrderTime"
        label="上次下单时间"
        width="160"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="customerLossState"
        label="客户流失状态"
        width="180"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="suspensionOfLossMeasures"
        label="暂缓流失措施"
        width="200"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="confirmLossReason"
        label="确认流失原因"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="confirmLossTime"
        label="确认流失时间"
        width="160"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        fixed="right"
        label="操作"
        width="220"
      >
        <template slot-scope="scope">
          <!-- v-if="scope.row.oppStateId == 1001" -->
          <el-button
            :disabled="
              scope.row.confirmLossTime != '' &&
              scope.row.confirmLossTime != null
            "
            slot="reference"
            size="mini"
            type="warning"
            @click="handleZH(scope.$index, scope.row)"
            >暂缓流失</el-button
          >
          <el-button
            :disabled="
              scope.row.confirmLossTime != '' &&
              scope.row.confirmLossTime != null
            "
            slot="reference"
            size="mini"
            type="danger"
            @click="handleQR(scope.$index, scope.row)"
            >确认流失</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="changeOrDel ? '暂缓流失' : '确认流失'"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        label-position="right"
        label-width="110px"
        ref="formLabelAlign"
        :model="formLabelAlign"
        ><!-- :inline="true":自动多行处理 -->
        <el-form-item
          label="说明"
          prop="note"
          :rules="[{ required: true, message: '请输入说明!' }]"
        >
          <el-input
            type="textarea"
            placeholder="请输入说明"
            v-model="formLabelAlign.note"
          ></el-input>
        </el-form-item>

        <!-- <div style="padding-top: 10px"></div>
        <el-form-item>
          <el-button
            type="primary"
            :round="true"
            @click="submitForm('formLabelAlign')"
            style="width: 20vw"
            >确 认</el-button
          >
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('formLabelAlign')"
          >确 认</el-button
        >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      changeOrDel: false,
      loading: true,
      tableData: null,
      dialogFormVisible: false,
      formLabelAlign: {
        customerLossId: null,
        note: null, //原因
      },
      rules: {
        scCustomerName: [{ required: true, message: "请输入客户名称!" }],
      },
    };
  },
  created: function () {
    this.initLoss();
  },
  methods: {
    initLoss() {
      this.$axios({
        method: "post",
        crossdomain: true,
        url: "/customer-loss/list",
      }).then((response) => {
        // console.log(response.data.data[0]); //请求成功返回的数据 列表信息
        this.tableData = response.data.data[0];
        this.loading = false;
      });
    },
    handleZH(index, row) {
      this.formLabelAlign.note = "";
      this.formLabelAlign.customerLossId = row.customerLossId;
      this.changeOrDel = true;
      this.dialogFormVisible = true;
    },
    handleQR(index, row) {
      this.formLabelAlign.note = "";
      this.formLabelAlign.customerLossId = row.customerLossId;
      this.changeOrDel = false;
      this.dialogFormVisible = true;
      // console.log("edit", index, row);
    },
    submitForm(formName) {
      // console.log( this.formLabelAlign);return false;
      this.$refs[formName].validate((valid) => {
        // console.log(this.formLabelAlign);
        if (valid) {
          this.$axios({
            method: "put",
            crossdomain: true,
            url:
              "/customer-loss/" +
              (this.changeOrDel ? "update/" : "loss/") +
              this.formLabelAlign.customerLossId +
              "?" +
              this.$qs.stringify({
                note: this.formLabelAlign.note,
              }),
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              // this.formLabelAlign.row = Object.assign({}, this.formLabelAlign.row, params);
              // console.log(this.formLabelAlign.row);
              this.$notify({
                title: "成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              // this.$router.replace({ path: "/" });
              this.dialogFormVisible = false;
              this.initLoss(); // 刷新页面
            } else {
              this.$notify({
                title: "失败惹",
                message: response.data.msg,
                type: "error",
                duration: "4000", // 1000ms后关闭
                showClose: false,
              });
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "还有选项没有填对呢",
            type: "error",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
  },
};
</script>

<style></style>
